iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
1
自我挑戰組

Laravel 實戰經驗分享系列 第 13

Laravel 實戰經驗分享 - Day13 初探 Laravel - View

  • 分享至 

  • xImage
  •  

今天要講的題目是我比較不擅長的 View,其實在 Laravel 中,View 本身就是屬於前端設計的範疇,我在這一年的工作都是以後端為主,其實前端的開發已經沒有那麼嫻熟了,加上公司目前走前後端的分離,我只要專注開發 API,因此我在寫本篇的時候可能會有錯誤,或是無法寫得太過深入,也麻煩大家可以指教囉!

Blade 模板

Laravel 是使用 Blade 模板進行前端渲染,由於過往寫純 PHP 時,會將 PHP 語法以及程式邏輯直接寫在 HTML&CSS 內,甚至會把 SQL 語法也寫進去,這樣容易造成後續維護上的麻煩,因此 Laravel 以模板引擎作為解法,雖仍不比前後段分離簡潔,但是也大幅降低了原本寫 Server Side Render 的麻煩。

建立 View

首先,我們在 resources/views 內新增一個新的模板 hello.blade.php

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
</head>
<body>
    <h1>Hello, it is my first Blade template.</h1>
</body>
</html>

透過 Route 在 Controller 內回傳

Route

Route::get('hello',  [HelloController::class, 'show']);

Controller

public function show(){
    return view('hello');
}

也可傳遞參數。

Route

Route::get('hello','HelloController@showName');

Controller

public function showName(){
   return view('hello')->with('name',$name);
}

原本的模板就可以接收這個傳過來的參數,Blade 是使用 {{}}

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
</head>
<body>
    <h1>Hello, my name is {{ $name }}.</h1>
</body>
</html>

這樣就是這個 View 的基本用法囉!
不過 Blade 有很多花俏的用法,例如可以自訂 Layouts,不用再重複造輪子,但篇幅有限,加上自己還沒有辦法那麼快的理解完所有用法,這邊就先不放來獻醜了,那我們明天見囉!


上一篇
Laravel 實戰經驗分享 - Day12 初探 Laravel - Model 模型以及 Eloquent ORM (下)
下一篇
Laravel 實戰經驗分享 - Day14 談談 RESTful API 設計
系列文
Laravel 實戰經驗分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言